<template>
  <h3>货车管理</h3>
  <el-row justify="space-between" :gutter="20">
    <el-col :span="12">
      <el-row justify="start">
        <el-input v-model="search" placeholder="搜索货车" clearable :prefix-icon="SearchIcon">
          <template #append>
            <el-button :icon="RefreshRight" @click="refreshData" circle :loading="isDownloading"/>
          </template>
        </el-input>
      </el-row>
    </el-col>
    <el-col :span="8" v-if="selectDeletion">
      <el-row justify="end">
        <el-button type="default" @click="selectDeletion = false">取消</el-button>
        <el-button type="danger" @click="sureDeleteAccount">确定删除</el-button>
      </el-row>
    </el-col>
    <el-col :span="8" v-else>
      <el-row justify="end">
        <el-button type="primary" :icon="Plus" @click="startCreateAccount">新建</el-button>
        <el-button type="danger" :icon="Delete" @click="startDeleteAccount">删除</el-button>
      </el-row>
    </el-col>
  </el-row>

  <el-table :data="truckListFilter" :default-sort="{prop:'tid',order:'ascending'}"
            @selection-change="handleSelectionChange" stripe>
    <el-table-column type="selection" v-if="selectDeletion"/>
    <el-table-column fixed prop="tid" label="编号" sortable/>
    <el-table-column prop="num" label="车牌号" sortable/>
    <el-table-column prop="type" label="车辆类型" sortable/>
    <el-table-column prop="owner" label="车辆拥有者" sortable/>
    <el-table-column prop="wid" label="所属仓库编号" sortable
                     :filters="filters" :filter-method="filterHandler" filter-placement="bottom-end"/>
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <!--<el-button link type="primary" size="small">详情</el-button>-->
        <el-button link type="primary" size="small" @click="startEditAccount(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <TruckCreate v-if="createDialogVisible" :callback="handleCreateResult"></TruckCreate>
  <TruckEdit v-if="editData!==undefined" :truck-data="editData" :callback="handleEditResult"></TruckEdit>
</template>

<script>
import {ref} from "vue";
import {deleteTruck, getTrucksList} from "@/scripts/data/truck";
import {Search as SearchIcon, Plus, Delete, RefreshRight} from "@element-plus/icons-vue";
import {ElNotification} from "element-plus";
import TruckEdit from "@/components/util/truck/TruckEdit";
import TruckCreate from "@/components/util/truck/TruckCreate";

export default {
  name: "AdminCompanyTruck",
  data() {
    return {
      isDownloading: true,
      truckList: [],
      typesList: [],
      filters: [],
      SearchIcon, Plus, Delete, RefreshRight,
      search: ref(''),
      selectDeletion: false,
      deleteList: [],
      editData: undefined,
      createDialogVisible: false,
    }
  },
  components: {
    TruckCreate,
    TruckEdit
  },
  methods: {
    refreshData() {
      this.isDownloading = true;
      getTrucksList((data) => {
        this.truckList = data;
        this.isDownloading = false;
      })
    },
    computeTypesList() {
      if (!this.isDownloading) {
        this.typesList = [];
        this.truckListFilter.forEach((item) => {
          if (!this.typesList.includes(item.wid)) {
            this.typesList.push(item.wid);
          }
        });
        this.filters = this.typesList.map((item) => ({
          text: item, value: item
        }));
      }
    },
    filterHandler(value, row) {
      return row.wid === value;
    },
    startCreateAccount() {
      if (this.createDialogVisible) {
        ElNotification({
          title: '无法打开',
          message: '当前有更改任务正在进行',
          type: 'warning',
        });
      } else {
        this.createDialogVisible = true;
      }
    },
    handleCreateResult(result) {
      if (result == 1) {
        ElNotification({
          title: '新建成功',
          message: '货车新建成功',
          type: 'success',
        });
        this.refreshData();
      } else if (result == 0) {
        ElNotification({
          title: '新建失败',
          message: '货车新建失败',
          type: 'error',
        });
      }
      this.createDialogVisible = false;
    },
    startDeleteAccount() {
      this.selectDeletion = !this.selectDeletion;
    },
    handleSelectionChange(val) {
      this.deleteList = val;
    },
    sureDeleteAccount() {
      // TODO 有时间改成批量执行的方式
      for (const item of this.deleteList) {
        deleteTruck(item.tid, (result) => {
          let ms = result ? '删除成功' : '删除失败'
          ElNotification({
            title: ms,
            message: '对于编号为' + item.tid + '的货车' + ms,
            type: result ? 'success' : 'error',
          });
          this.refreshData();
        })
      }
      this.selectDeletion = false;
    },
    startEditAccount(data) {
      if (this.editData !== undefined) {
        ElNotification({
          title: '无法打开',
          message: '当前有更改任务正在进行',
          type: 'warning',
        });
      } else {
        this.editData = data;
      }
    },
    handleEditResult(result) {
      if (result == 1) {
        ElNotification({
          title: '更改成功',
          message: '货车' + this.editData.num + '的信息更改成功',
          type: 'success',
        });
        this.refreshData();
      } else if (result == 0) {
        ElNotification({
          title: '更改失败',
          message: '货车' + this.editData.num + '的信息更改失败',
          type: 'error',
        });
      }
      this.editData = undefined;
    }
  },
  computed: {
    truckListFilter() {
      let rs = this.search ? this.truckList.filter(
          (data) => data.num.includes(this.search)
      ) : this.truckList;
      this.computeTypesList();
      return rs;
    },
  },
  created() {
    this.refreshData()
  }
}
</script>

<style scoped>

</style>